<template>
	<div class="customGraphicaBox">
		<div class="customGraphica bg-white flex-row">
			<div class="customGraphicaProgress rela margin-r-20" style="max-width: 75%;" :style="{width: progressWidth+'%'}">
				<div class="splitLineBox abso">
					<template v-for="(item,index) in 89">
						<div class="splitLine abso bg-white" :key="index" style="left: -3px;" v-if="index==0"></div>
						<div class="splitLine abso bg-white" :key="index" :style="{left: 10*index-3+'px'}" v-else></div>
					</template>
				</div>
			</div>
			<div class="number font-14 flex-row">
				<span class="font-18">{{number}}</span>件
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			progressWidth: {
				type: Number,
				default: 0
			},
			number: {
				type: [Number, String],
				default: ''
			}
		},
		mounted() {
			console.log('progressWidth-1', this.progressWidth)
		}
	}
</script>

<style lang="less" scoped>
	.customGraphica{
		width: 960px;
		height: 14px;
		.customGraphicaProgress{
			height: 100%;
			background-image: linear-gradient(to right, #386af8, #30b8d6);
		}
		.splitLineBox{
			width: 100%;
			height: 100%;
			top: 0;
			overflow: hidden;
			.splitLine{
				width: 3px;
				height: 100%;
			}
		}
		.number{
			span{
				color: #3770f5;
				margin-right: 6px;
			}
		}
	}
</style>
